import QtQuick
import QtQuick.Controls
import QtQuick.Dialogs as D
import Gui.Components
import Backend as B
import "./playlist"

Popup {
    id: root
    B.PlaylistViewModel {
        id: playlistViewModel
    }

    D.MessageDialog {
        id: _messageDig
        text: "清空播放列表"
        informativeText: "你确定要清空播放列表吗?"
        buttons: D.MessageDialog.Ok | D.MessageDialog.Cancel
        onAccepted: {
            playlistViewModel.clearAll();
        }
    }

    background: Rectangle {
        color: palette.base
    }
    contentItem: Item {
        Item {
            id: _topArea
            width: parent.width
            height: 70
            Label {
                text: "播放队列"
                anchors.verticalCenter: parent.verticalCenter
                font {
                    pixelSize: 24
                    bold: true
                }
            }
            FlatIconButton {
                anchors.verticalCenter: parent.verticalCenter
                anchors.right: parent.right
                anchors.rightMargin: 10
                iconName: "fa.trash"
                iconSize: 20
                tipName: "清空全部"
                onClicked: _messageDig.open()
            }
            Label {
                anchors {
                    left: parent.left
                    bottom: parent.bottom
                }
                font.pixelSize: 12
                text: "共" + _listView.model.count + "首歌曲"
            }
        }

        MListView {
            id: _listView
            model: playlistViewModel.playlistModel
            width: parent.width
            property PlaylistCell previousCheckedCell: null
            clip: true
            boundsBehavior: Flickable.StopAtBounds
            anchors {
                left: parent.left
                right: parent.right
                top: _topArea.bottom
                topMargin: 5
                bottom: _closeWinBtn.top
            }

            delegate: PlaylistCell {
                required property int index
                required property string name
                required property string artists
                required property string albumPic

                musicName: name
                artistsName: artists
                albumSource: albumPic

                width: ListView.view.width
                height: 50
                checked: playlistViewModel.currentIndex === index
                onDoubleClicked: {
                    playlistViewModel.currentIndex = index;
                }
                onRemoveItem: {
                    playlistViewModel.removeMusic(index);
                }
            }
        }

        FlatIconButton {
            id: _closeWinBtn
            onClicked: root.close()
            anchors {
                right: _closeTxt.left
                verticalCenter: _closeTxt.verticalCenter
            }
            iconName: "mdi.playlist-music-outline"
            iconSize: 28
            topPadding: pressed ? 4 : 0
        }
        Label {
            id: _closeTxt
            text: "收起"
            anchors {
                right: parent.right
                bottom: parent.bottom
                bottomMargin: 20
                margins: 10
            }
            font.pixelSize: 12
            color: _closeWinBtn.currentIconColor
        }
    }

    enter: Transition {
        NumberAnimation {
            property: "x"
            from: root.parent.width
            to: root.parent.width - root.width
            easing.type: Easing.OutQuad
            duration: 200
        }
    }
    exit: Transition {
        NumberAnimation {
            property: "x"
            from: x
            to: root.parent.width
            easing.type: Easing.OutQuad
            duration: 200
        }
    }
}
